<template>
    <div id="xzpcxq" v-show="!mapshow">
        <div style="background-color: white;padding: 10px;">
            <el-table :data="xqlist" border style="width: 700px;" height="550">
                <el-table-column align="center" type="index" label="序号" width="80" />
                <el-table-column prop="code" label="行政代码" width="180" />
                <el-table-column label="村(居)委会" width="280">
                    <template #default="scope">
                        <el-button @click="getmap(scope.row)">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="重置">
                    <template #default="scope">
                        <el-button @click="divide(scope.row)">重置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div id="xzpcxqmap" v-show="mapshow">
        <div class="tools">
            <el-tooltip class="box-item" effect="dark" content="选择" placement="left">
                <el-button class="mbtn" :icon="Pointer" @click="choose()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="绘制切割区" placement="left">
                <el-button class="mbtn" :icon="Crop" @click="drawcutarea()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="合并" placement="left">
                <el-button class="mbtn" :icon="Menu" @click="f_union()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="切割" placement="left">
                <el-button class="mbtn" :icon="PieChart" @click="f_cut()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="切割调整" placement="left">
                <el-button class="mbtn" :icon="Edit" @click="modify()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="属性" placement="left">
                <el-button class="mbtn" :icon="Operation" @click="property()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="放大" placement="left">
                <el-button class="mbtn" :icon="ZoomIn" @click="zoomin()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="缩小" placement="left">
                <el-button class="mbtn" :icon="ZoomOut" @click="zoomout()"></el-button>
            </el-tooltip>
            <!-- <el-tooltip class="box-item" effect="dark" content="挖孔" placement="left">
                <el-button class="mbtn" :icon="Warning" @click="f_makehole()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="取消挖孔" placement="left">
                <el-button class="mbtn" :icon="CircleClose" @click="f_removehole()"></el-button>
            </el-tooltip> -->
            <el-tooltip class="box-item" effect="dark" content="还原" placement="left">
                <el-button class="mbtn" :icon="Refresh" @click="f_history()"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="返回" placement="left">
                <el-button class="mbtn" :icon="Switch" @click="mapshow = false;"></el-button>
            </el-tooltip>

        </div>
        <el-dialog title="历史记录" v-model="hisshow">
            <el-table :data="hislist" height="400">
                <el-table-column prop="gid" label="gid" width="80" />
                <el-table-column prop="euser" label="用户名称" />
                <el-table-column prop="edit_time" label="操作日期" width="180" />
                <el-table-column prop="os_info" label="行为" />
                <el-table-column label="行为">
                    <template #default="scope">
                        <el-button @click="f_return(scope.row.gid)">还原</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <div id="map" class="map"></div>
        <div class="cleardialog area">
            <el-dialog title="普查小区" draggable class="mfloat" v-model="mapshow" style="width: 25%;" :modal="false"
                :close-on-click-modal="false" :show-close="false">
                <div style="padding: 10px;" v-show="xzlistshow">
                    <el-table :data="xqlist" border height="480">
                        <el-table-column align="center" type="index" label="序号" width="60" />
                        <el-table-column prop="code" label="行政代码" width="140" />
                        <el-table-column label="村(居)委会" width="180">
                            <template #default="scope">
                                <div :title="scope.row.name"
                                    style="cursor: pointer;width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                                    @click="getmap(scope.row)">{{ scope.row.name }}</div>
                                <!-- <el-button size="small" @click="getmap(scope.row)">{{ scope.row.name }}</el-button> -->
                            </template>
                        </el-table-column>
                        <el-table-column label="重置">
                            <template #default="scope">
                                <el-button size="small" @click="divide(scope.row)">重置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="listcon" v-show="!xzlistshow">
                    <el-button style="margin-bottom: 10px;" type="primary" size="small"
                        @click="xzlistshow = true">返回上级</el-button>

                    <el-table :data="m_xqlist" border height="450">
                        <el-table-column type="index" label="序号" width="60" align="center" />
                        <el-table-column prop="name" label="普查小区名称"  />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button style="margin-right: 10px;" size="small"
                                    @click="getmessage(scope.row)">修改</el-button>
                                <el-button size="small" @click="aimcwh(scope.row)">定位</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <!-- <div style="margin: 5px 0;" v-for="(item, index) in m_xqlist">
                        <span>{{ index + 1 }}</span>
                        <el-icon style="margin: 0 5px;cursor: pointer;" @click="getmessage(item)">
                            <Operation />
                        </el-icon>
                        <span style="cursor: pointer;" @click="aimcwh(item)">
                            {{ item.name }}
                        </span>
                    </div> -->
                </div>
            </el-dialog>
        </div>
        <div class="area">
            <el-dialog class="m_dlg" title="修改小区属性" v-model="Infoshow" height="500" width="500">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <div>
                    <el-form :model="InfoForm" label-width="auto" class="m_form">
                        <el-form-item label="编号">
                            <el-input v-model="InfoForm.gid" readonly />
                        </el-form-item>
                        <el-form-item label="小区编码">
                            <el-input v-model="InfoForm.code" type="number" />
                        </el-form-item>
                        <el-form-item label="小区名称">
                            <el-input v-model="InfoForm.name" />
                        </el-form-item>
                        <el-form-item label="隶属上级">
                            <el-input v-model="InfoForm.pcode" readonly />
                        </el-form-item>
                        <el-form-item label="GUID">
                            <el-input v-model="InfoForm.guid" readonly />
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" style="margin-right: 10px;" @click="updateVillage()">
                            确定
                        </el-button>
                        <el-button @click="Infoshow = false;">
                            取消
                        </el-button>
                    </div>

                </template>
            </el-dialog>

        </div>
        <div class="m_footer">
            <div style="display: flex;justify-content: space-between;align-items: center;height: 38px;font-size: 14px;">
                <div style="display: flex;justify-content: flex-start;">
                    <div style="margin-right: 20px;">区划名称：{{ localname }}</div>
                    <div>区划编码：{{ localcode }}</div>
                </div>
                <div>
                    坐标：
                    {{ Number($store.curlon).toFixed(5) }}，
                    {{ Number($store.curlat).toFixed(5) }}
                    比例尺：
                    <span v-show="Number($store.scale) > 1">
                        1:{{ Number($store.scale).toFixed(0) * 1000 }}
                    </span>
                    <span v-show="Number($store.scale) < 1">
                        1:{{ Number($store.scale * 10).toFixed(0) * 100 }}
                    </span>
                </div>
                <div>建设单位：河南省统计局</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref, onUnmounted } from 'vue';
import $mapreq from "../../api/mapreq";
import { Switch, Pointer, Menu, Crop, Edit, Operation, PieChart, ZoomIn, ZoomOut, Refresh, Warning, CircleClose } from '@element-plus/icons-vue';
import { init, jzwPOLYGON, unloadMap, clearJZW, choose, drawcutarea, union, modify, cut, mapreset, zoomin, zoomout, aimWKT, makehole, removehole, exportmap } from '../../utils/mapjs/map';
import { dataStore } from "../../store/data";
const $store = dataStore();
const xqlist = ref([]);
const mapshow = ref(true);
const xzlistshow = ref(true);
const localname = ref(localStorage.getItem('qhinfo'));
const localcode = ref(localStorage.getItem('code'));
onMounted(() => {
    getlist();
    init();
});
onUnmounted(() => {
    unloadMap();
})
function f_removehole() {
    if (cut().area.length < 1) {
        ElMessage({
            message: '请选择一个对象!',
            type: 'warning'
        });
    } else if (cut().area.length != 1) {
        ElMessage({
            message: '仅可选择一个对象!',
            type: 'warning'
        });
    } else {
        ElMessageBox.confirm(
            '确定执行操作?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            removehole();
            setTimeout(() => {
                getmap();
            }, 500)
        })

    }
}
function f_makehole() {
    if (cut().area.length < 1) {
        ElMessage({
            message: '请选择一个对象!',
            type: 'warning'
        });
    } else if (cut().area.length != 1) {
        ElMessage({
            message: '仅可选择一个对象!',
            type: 'warning'
        });
    } else {
        makehole(m_code.value);
    }
}
const m_xqlist = ref([]);
const listcode = ref({});
const usernm = ref('');
const hisshow = ref(false);
const hislist = ref([]);
function f_history() {
    hisshow.value = true;
    $mapreq.getCzList().then(res => {
        if (res.code == 200) {
            hislist.value = res.data;
        }
    });
}
//
function f_return(e) {
    ElMessageBox.confirm(
        '确定还原操作?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $mapreq.historyBack(e).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                });
                hisshow.value = false;
                mapreset();
                getlist();
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
            }
        });
    })
}
const m_code = ref('');
function getmap(e) {
    mapshow.value = true;
    xzlistshow.value = false;
    mapreset();
    let code;
    if (e) {
        usernm.value = e.name;
        code = e.code;
        m_code.value = e.code;
        listcode.value = e;
    } else {
        code = m_code.value;
    }
    $mapreq.getXZpcxqlist(code).then(res => {
        if (res.code == 200) {
            m_xqlist.value = res.data;
            jzwPOLYGON(res.data);
        }
    });
    aimWKT(e.geom);
}
function aimcwh(e) {
    aimWKT(e.geom);
}
function property() {
    if (cut().area.length != 1) {
        ElMessage({
            message: '请选择一个区域!',
            type: 'warning',
        });
    } else {
        getmessage(cut().area[0].values_);
    }
}
const Infoshow = ref(false);
const InfoForm = ref({});
function getmessage(e) {
    let gid = e.gid;
    $mapreq.getpcxqxx(gid).then(res => {
        if (res.code == 200) {
            InfoForm.value = res.data;
            Infoshow.value = true;
        }
    });
}
function updateVillage() {
    if (InfoForm.value.code == '') {
        ElMessage({
            message: '请输入小区编码!',
            type: 'warning'
        });
    } else if (InfoForm.value.name == '') {
        ElMessage({
            message: '请输入小区名称!',
            type: 'warning'
        });
    } else {
        ElMessageBox.confirm(
            '确定修改吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            let obj = {};
            obj.gid = InfoForm.value.gid;
            obj.code = InfoForm.value.code;
            obj.name = InfoForm.value.name;
            $mapreq.updpcxqxx(obj).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '操作成功!',
                        type: 'success'
                    });
                    Infoshow.value = false;
                    getmap(listcode.value);
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning'
                    });
                }
            });
        }).catch(() => {

        });
    }

}
function f_union() {
    if (union().length != 2) {
        ElMessage({
            message: "请选择两个绘制区域!",
            type: 'warning'
        });
    } else {
        let obj = {};
        obj.gid1 = union()[0].values_.gid;
        obj.gid2 = union()[1].values_.gid;
        merge(obj);

    }
}
function merge(e) {
    $mapreq.PCXQxqunion(e).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: '操作成功!',
                type: 'success'
            });
            // init();
            setTimeout(() => {
                getmap();
            }, 500)
            // getlist();
        }
    });
}
function f_cut() {
    if (cut().area.length != 1) {
        ElMessage({
            message: '请选择一个被切割区!',
            type: 'warning',
        });
    } else if (cut().geom == '' || cut().geom == 'MULTIPOLYGON((()))') {
        ElMessage({
            message: '请绘制一个切割区!',
            type: 'warning',
        });
    } else {
        let data = {};
        data.gid = cut().area[0].values_.gid;
        data.geom = cut().geom;
        c_cut(data);
    }
}
//Dirty Deeds Done Dirt Cheap D4C
function c_cut(data) {
    $mapreq.PCXQxqcut(data).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: '操作成功!',
                type: 'success'
            });
            setTimeout(() => {
                getmap();
            }, 500)
        } else {
            ElMessage({
                message: res.message,
                type: 'warning'
            });
        }
    }).catch(err => {
        ElMessage({
            message: err.message,
            type: 'warning'
        });
    });
}
function divide(e) {
    ElMessageBox.confirm(
        '该操作将销毁已绘制的普查小区图,请谨慎执行,确定执行该操作?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        $mapreq.plotReDivide(e.code).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success'
                });
            }
        });
    }).catch(() => {

    });

}
function getlist() {
    let code=localStorage.getItem("code")
    $mapreq.getplot(code).then(res => {
        if (res.code == 200) {
            xqlist.value = res.data;
        }
    });
}
</script>

<style lang="less">
#map {
    height: 100%;

    .ol-overlaycontainer-stopevent {
        display: none;
    }

    .ol-zoom-out {
        display: none;
    }

    .ol-zoom-in {
        display: none;
    }
}

#xzpcxq {
    padding-top: 20px;
    padding-left: 20px;
}

#xzpcxqmap {
    height: 100%;
    position: relative;

    .m_footer {
        position: fixed;
        z-index: 99999;
        bottom: 0;
        color: white;
        background-color: rgba(0, 0, 0, .8);
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .m_footerw {

        background-color: #F3F3F3 !important;
        border-top: 1px solid #ccc !important;
        color: #888 !important;
    }

    .listcon {
        max-height: 500px;
        overflow-y: scroll;
        color: black;
        padding: 10px;
        height: 500px;
    }

    ::-webkit-scrollbar {

        background-color: #ccc;
        width: 0px;
        border-radius: 500px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 500px;
    }

    .tools {
        position: absolute;
        display: flex;
        width: 50px;
        justify-content: flex-start;
        flex-wrap: wrap;
        top: 20px;
        right: 10px;
        z-index: 99999;

        .mbtn {
            width: 20px;
            margin-top: 10px;

            .el-icon {
                color: #133C7E;
            }
        }
    }

    .el-button+.el-button {
        margin-left: 0 !important;
    }

    .mfloat {
        position: fixed;
        left: 30px;
        // background-color: rgba(3, 36, 56, 0.6);
        color: black;
        width: 240px;
        height: auto;
        padding: 0px;
        border-radius: 10px;
    }

    .area .el-dialog__title {
        display: block;
        color: #fff !important;
        font-size: 16px;
    }

    .el-dialog__headerbtn {
        top: -2px;
    }

    .area .el-dialog__header {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px;
        background-color: #133C7E;
        border-radius: 10px 10px 0 0;

        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }

        .el-icon svg {
            color: #fff;
        }
    }

    .el-overlay-dialog {
        pointer-events: none;
    }

    .el-dialog {
        pointer-events: auto;
    }
}

.m_dlg {
    background-color: rgba(3, 36, 56, 0.6);
    color: white;
    height: auto;
    padding: 0px;

    .m_form {
        padding: 20px;

        .el-form-item__label {
            color: white;
        }

        .el-input {
            --el-input-border-color: #095e7e !important;
            --el-input-hover-border-color: #4cbfea !important;
        }

        .el-input__inner {
            color: #0fb3e6 !important;
        }

        .el-input__wrapper,
        .el-input-group__prepend {
            background: none !important;
        }
    }

    .dialog-footer {
        padding: 0 20px 20px 0;
    }
}

.cleardialog>div {
    width: 0;
}
</style>
